<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <Header title="发布职位" />

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-6">
      <div class="max-w-4xl mx-auto">
        <!-- 页面标题 -->
        <div class="mb-8">
          <h1 class="text-2xl font-bold text-gray-800 mb-2">发布新职位</h1>
          <p class="text-gray-600">填写职位信息，吸引优秀人才加入您的团队</p>
        </div>

        <!-- 发布表单 -->
        <form @submit.prevent="submitJob" class="space-y-8">
          <!-- 基本信息 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
              <i class="ri-briefcase-line mr-2 text-primary"></i>
              基本信息
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">职位名称 *</label>
                <input 
                  v-model="jobForm.title"
                  type="text" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="如：高级产品经理"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">所属部门</label>
                <select 
                  v-model="jobForm.department"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="">请选择部门</option>
                  <option value="产品部">产品部</option>
                  <option value="技术部">技术部</option>
                  <option value="市场部">市场部</option>
                  <option value="销售部">销售部</option>
                  <option value="人事部">人事部</option>
                  <option value="财务部">财务部</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">工作地点 *</label>
                <input 
                  v-model="jobForm.location"
                  type="text" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="如：上海市浦东新区"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">薪资范围 *</label>
                <input 
                  v-model="jobForm.salary"
                  type="text" 
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="如：15-25K·14薪"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">工作经验 *</label>
                <select 
                  v-model="jobForm.experience"
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="">请选择经验要求</option>
                  <option value="不限">不限</option>
                  <option value="应届生">应届生</option>
                  <option value="1-3年">1-3年</option>
                  <option value="3-5年">3-5年</option>
                  <option value="5-10年">5-10年</option>
                  <option value="10年以上">10年以上</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">学历要求 *</label>
                <select 
                  v-model="jobForm.education"
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="">请选择学历要求</option>
                  <option value="不限">不限</option>
                  <option value="高中">高中</option>
                  <option value="大专">大专</option>
                  <option value="本科">本科</option>
                  <option value="硕士">硕士</option>
                  <option value="博士">博士</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">工作性质 *</label>
                <select 
                  v-model="jobForm.type"
                  required
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="">请选择工作性质</option>
                  <option value="全职">全职</option>
                  <option value="兼职">兼职</option>
                  <option value="实习">实习</option>
                  <option value="外包">外包</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">职位亮点</label>
                <div class="flex flex-wrap gap-2">
                  <button 
                    v-for="highlight in jobHighlights"
                    :key="highlight"
                    type="button"
                    @click="toggleHighlight(highlight)"
                    :class="[
                      'px-3 py-1.5 rounded-full text-sm border transition-colors',
                      jobForm.highlights.includes(highlight)
                        ? 'bg-primary text-white border-primary'
                        : 'bg-white text-gray-600 border-gray-300 hover:border-primary'
                    ]"
                  >
                    {{ highlight }}
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 职位描述 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
              <i class="ri-file-text-line mr-2 text-primary"></i>
              职位描述
            </h2>
            
            <div class="space-y-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">工作职责 *</label>
                <textarea 
                  v-model="jobForm.description"
                  required
                  rows="6"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="请详细描述该职位的主要工作内容和职责..."
                ></textarea>
                <div class="flex justify-between items-center mt-2">
                  <div class="text-sm text-gray-500">建议200-500字，详细描述有助于吸引合适的候选人</div>
                  <button type="button" class="text-primary text-sm hover:text-primary/80 flex items-center">
                    <i class="ri-magic-line mr-1"></i>
                    AI优化
                  </button>
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">任职要求 *</label>
                <textarea 
                  v-model="jobForm.requirements"
                  required
                  rows="6"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="请描述对候选人的技能、经验、能力等要求..."
                ></textarea>
              </div>
            </div>
          </div>

          <!-- 福利待遇 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
              <i class="ri-gift-line mr-2 text-primary"></i>
              福利待遇
            </h2>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
              <button 
                v-for="benefit in benefitOptions"
                :key="benefit"
                type="button"
                @click="toggleBenefit(benefit)"
                :class="[
                  'p-3 rounded-lg border text-sm transition-colors text-left',
                  jobForm.benefits.includes(benefit)
                    ? 'bg-primary/10 text-primary border-primary'
                    : 'bg-white text-gray-600 border-gray-300 hover:border-primary'
                ]"
              >
                <i class="ri-check-line mr-1" v-if="jobForm.benefits.includes(benefit)"></i>
                {{ benefit }}
              </button>
            </div>
          </div>

          <!-- 发布设置 -->
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
              <i class="ri-settings-line mr-2 text-primary"></i>
              发布设置
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">有效期</label>
                <select 
                  v-model="jobForm.validDays"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                >
                  <option value="30">30天</option>
                  <option value="60">60天</option>
                  <option value="90">90天</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">招聘人数</label>
                <input 
                  v-model="jobForm.recruitCount"
                  type="number" 
                  min="1"
                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                  placeholder="如：2"
                >
              </div>
              
              <div class="md:col-span-2">
                <div class="flex items-center space-x-6">
                  <label class="flex items-center">
                    <input 
                      v-model="jobForm.urgent"
                      type="checkbox" 
                      class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary"
                    >
                    <span class="ml-2 text-sm text-gray-700">紧急招聘</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input 
                      v-model="jobForm.featured"
                      type="checkbox" 
                      class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary"
                    >
                    <span class="ml-2 text-sm text-gray-700">置顶显示</span>
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="flex justify-end space-x-4">
            <button 
              type="button"
              @click="saveDraft"
              class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
            >
              保存草稿
            </button>
            <button 
              type="button"
              @click="previewJob"
              class="px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary/10 transition-colors"
            >
              预览职位
            </button>
            <button 
              type="submit"
              :disabled="isSubmitting"
              class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center"
            >
              <i v-if="isSubmitting" class="ri-loader-line animate-spin mr-2"></i>
              {{ isSubmitting ? '发布中...' : '立即发布' }}
            </button>
          </div>
        </form>
      </div>
    </main>

    <!-- 预览模态框 -->
    <JobPreviewModal 
      v-if="showPreview"
      :job="jobForm"
      @close="showPreview = false"
      @publish="submitJob"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useJobsStore } from '../stores/jobs'
import Header from '../components/Header.vue'
import JobPreviewModal from '../components/JobPreviewModal.vue'

const router = useRouter()
const jobsStore = useJobsStore()

const isSubmitting = ref(false)
const showPreview = ref(false)

const jobForm = ref({
  title: '',
  department: '',
  location: '',
  salary: '',
  experience: '',
  education: '',
  type: '',
  description: '',
  requirements: '',
  benefits: [] as string[],
  highlights: [] as string[],
  validDays: 30,
  recruitCount: 1,
  urgent: false,
  featured: false
})

const jobHighlights = [
  '五险一金', '年终奖', '带薪年假', '弹性工作', '股权激励', 
  '免费班车', '健身房', '下午茶', '团建活动', '培训机会'
]

const benefitOptions = [
  '五险一金', '补充医疗保险', '年终奖', '绩效奖金',
  '带薪年假', '病假', '婚假', '产假',
  '弹性工作时间', '远程办公', '免费班车', '餐补',
  '健身房', '图书馆', '下午茶', '零食',
  '团建活动', '年会', '生日会', '节日福利',
  '培训机会', '学习津贴', '技能认证', '晋升通道'
]

const toggleHighlight = (highlight: string) => {
  const index = jobForm.value.highlights.indexOf(highlight)
  if (index > -1) {
    jobForm.value.highlights.splice(index, 1)
  } else {
    jobForm.value.highlights.push(highlight)
  }
}

const toggleBenefit = (benefit: string) => {
  const index = jobForm.value.benefits.indexOf(benefit)
  if (index > -1) {
    jobForm.value.benefits.splice(index, 1)
  } else {
    jobForm.value.benefits.push(benefit)
  }
}

const saveDraft = () => {
  alert('草稿已保存')
}

const previewJob = () => {
  showPreview.value = true
}

const submitJob = async () => {
  isSubmitting.value = true
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    const newJob = {
      ...jobForm.value,
      company: '您的公司', // 从用户信息获取
      status: 'active' as const,
      expiresAt: new Date(Date.now() + jobForm.value.validDays * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
    }
    
    jobsStore.addJob(newJob)
    
    alert('职位发布成功！')
    router.push('/job-management')
  } catch (error) {
    alert('发布失败，请重试')
  } finally {
    isSubmitting.value = false
    showPreview.value = false
  }
}
</script>
